<template>
	<view class="BooksListItemBox" v-for="(item,index) in BooksList" :key="index">
		<BooksSynopsis  
			:Id="item.id" 
			:BooksName="item.title" 
			:Synopsis="item.subTitle" 
			:CoverUrl="baseURL+item.imgSrc"
			:Price="item.price"
			:Wordage="item.words"
			:IsOwn="1"
		></BooksSynopsis>
	</view>
</template>

<script setup lang="ts">
	import BooksSynopsis from '@/compoents/BooksSynopsis/BooksSynopsis.vue';
	import {UserNovels} from '@/api/User.js'
	import {ref} from 'vue'
	const baseURL = ref("http://www.filwc.com/prod-api");
	interface BookType {
		title: string,
		subTitle: string,
		imgSrc: string,
		href: string,
		id: number,
		price: number
		[propName: string]: any
	}
	let BooksList = ref<BookType[]>([]);
	const getLists = async() => {
		let res:any = await UserNovels();
		BooksList.value = res.rows;
		console.log(res)
	}
	getLists();
</script>

<style lang="less" scoped>
	.BooksListItemBox{
		padding-top: 20rpx;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>